
<template>
  <div class="dorm-management">
    <h2>宿舍管理界面</h2>
    <div class="dorm-list">
      <div v-for="dorm in dorms" :key="dorm.id" class="dorm-item">
        <div class="dorm-info">
          <p class="dorm-number">宿舍号: {{ dorm.dormNumber }}</p>
          <p class="dorm-class">班级: {{ dorm.class }}</p>
          <p class="dorm-count">人数: {{ dorm.numberOfPeople }}</p>
        </div>
        <div class="dorm-actions">
          <button @click="editDorm(dorm)" class="edit-btn">编辑</button>
          <button @click="deleteDorm(dorm.id)" class="delete-btn">删除</button>
        </div>
      </div>
    </div>
    <button @click="showAddForm" class="add-btn">添加宿舍</button>

    <!-- 添加宿舍表单 -->
    <div v-if="showAddFormFlag">
      <input type="text" v-model="newDorm.dormNumber" placeholder="宿舍号" class="input-field" />
      <input type="text" v-model="newDorm.class" placeholder="班级" class="input-field" />
      <input type="number" v-model="newDorm.numberOfPeople" placeholder="人数" class="input-field" />
      <button @click="addDormConfirm" class="confirm-btn">确认添加</button>
    </div>

    <!-- 编辑宿舍表单 -->
    <div v-if="showEditFormFlag">
      <input type="text" v-model="editDorm.dormNumber" placeholder="宿舍号" class="input-field" />
      <input type="text" v-model="editDorm.class" placeholder="班级" class="input-field" />
      <input type="number" v-model="editDorm.numberOfPeople" placeholder="人数" class="input-field" />
      <button @click="editDormConfirm" class="confirm-btn">确认编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "DormitoryManagement",
  data() {
    return {
      dorms: [
        { id: 1, dormNumber: "101", class: "一班", numberOfPeople: 4 },
        { id: 2, dormNumber: "102", class: "一班", numberOfPeople: 3 },
        { id: 3, dormNumber: "101", class: "二班", numberOfPeople: 5 },
        { id: 4, dormNumber: "102", class: "二班", numberOfPeople: 3 },
      ],
      showAddFormFlag: false,
      showEditFormFlag: false,
      newDorm: { dormNumber: "", class: "", numberOfPeople: 0 },
      currentEditDorm: null, // 当前正在编辑的宿舍对象
    };
  },
  methods: {
    showAddForm() {
      this.showAddFormFlag = true;
    },
    addDormConfirm() {
      this.dorms.push({
        id: this.dorms.length + 1,
        dormNumber: this.newDorm.dormNumber,
        class: this.newDorm.class,
        numberOfPeople: this.newDorm.numberOfPeople,
      });
      this.showAddFormFlag = false;
      this.newDorm = { dormNumber: "", class: "", numberOfPeople: 0 };
    },
    editDorm(dorm) {
      this.showEditFormFlag = true;
      this.currentEditDorm = dorm;
    },
    editDormConfirm() {
      this.currentEditDorm.dormNumber = this.editDorm.dormNumber;
      this.currentEditDorm.class = this.editDorm.class;
      this.currentEditDorm.numberOfPeople = this.editDorm.numberOfPeople;
      this.showEditFormFlag = false;
    },
    deleteDorm(id) {
      this.dorms = this.dorms.filter((d) => d.id!== id);
    },
  },
};
</script>

<style scoped>
.dorm-management {
  padding: 20px;
}

.dorm-list {
  display: flex;
  flex-wrap: wrap;
}

.dorm-item {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
  width: 250px;
  background-color: #f8f9fa;
}

.dorm-number {
  color: #007bff;
}

.dorm-class {
  color: #495057;
}

.dorm-count {
  color: #28a745;
}

.dorm-actions {
  text-align: right;
}

.add-btn {
  background-color: #28a745;
  color: white;
}

.edit-btn {
  background-color: #007bff;
  color: white;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
}

.confirm-btn {
  background-color: #17a2b8;
  color: white;
}

.input-field {
  border: 1px solid #ced4da;
}
</style>
